<script setup>
import {ref} from "vue";
import {userRegister} from '@/api/user'
import router from "@/router/index.js";
import {ElMessage} from "element-plus";
import { Calendar, Search ,User , Male, Female } from '@element-plus/icons-vue'

const userData = ref({
  uname:'',
  upassword:'',
  pwdconfirm:'',
  usex:''
})
const register = async ()=> {
  let result = await userRegister(userData.value)
  console.log(result)
  if (result.data.code == 200) {
    ElMessage.success("注册成功，请返回登录")
    router.push('/login')
  }
}
const gotoLogin = ()=>{
  router.push('/login')
}

</script>

<template>
    <div class="container">
      <div class="my-register-contend">
        <h1>京猫用户注册</h1>
        <div class="flex gap-4 mb-4 my-register-input">
          <div>
            <span>用户名</span>
            <el-input
                v-model="userData.uname"
                style="width: 240px"
                placeholder="请输入用户名"
                :prefix-icon="User"
            />
          </div>
          <div>
            <span>密码</span>
            <el-input
                v-model="userData.upassword"
                style="width: 240px"
                placeholder="请输入密码"
                :prefix-icon="User"
                type="password"
            />
          </div>
          <div>
            <span>确认密码</span>
            <el-input
                v-model="userData.pwdconfirm"
                style="width: 240px"
                placeholder="请再次输入密码"
                :prefix-icon="User"
                type="password"
            />
          </div>
          <div>
            <span>性别</span>
            <el-input
                v-model="userData.usex"
                style="width: 240px"
                placeholder="请输入性别"
                :prefix-icon="Female"
                :suffix-icon="Male"
            />
          </div>

        </div>
        <input type="checkbox" name="agree"  id="ch"  style="margin-left:5px;display:inline-block;" value="0"/>
        <span style="font-size:20px;text-align: center;">我已阅读并同意《用户注册协议》</span>
        <button @click="register" value="注册">立即注册</button>
        <button @click="gotoLogin" value="注册">返回登录</button>
      </div>
    </div>
</template>

<style scoped>
.my-register-contend {
  color: whitesmoke;
  padding: 20px;
  width: 450px;
  height: 500px;
  background: url(../assets/img/user-consumer/jingmao.png) no-repeat;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0%);
  margin-top: 50px;
}
.my-register-contend h1 {
  font-size: 35px;
  margin-bottom: 20px;
}
.my-register-input div {
  display: flex;
}
.my-register-input div span {
  width: 100px;
  display: block;
  font-size: large;
}
body {
  background-color: whitesmoke;
}
/*.container{
  !*border-radius: 25px;*!
  !*box-shadow: 0 0 20px #222;*!
  width: 450px;
  height: 500px;
  margin: 0 auto;
  text-align: center;
  margin-top: 200px;
  background: url(../assets/img/user-consumer/jingmao.png) no-repeat;
}*/
button{
  background-color: rgba(230, 228, 236, 0.93);
  border: none;
  color: rgba(16, 17, 17, 0.34);
  padding: 10px 70px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-top: 30px;
  margin-left: 50px;
}
</style>